<template>
  <el-dialog :title="title" width="85%" :visible.sync="visible" destroy-on-close top="5vh" @close="closeClick">
    <el-form :inline="true" :model="recordInfo.queryForm" class="demo-form-inline">
      <el-row>
        <el-col>
          <el-form-item label="机构名称">
            <el-input v-model="recordInfo.queryForm.organizationName" placeholder="请输入机构名称" clearable />
          </el-form-item>
          <el-form-item v-if="'onlineShoppingMallGoodsOrganization' === functionSort" label="机构编号">
            <el-input v-model="recordInfo.queryForm.organizationId" clearable />
          </el-form-item>
          <el-form-item v-if="'onlineShoppingMallGoodsOrganization' === functionSort" label="机构分类">
            <el-select v-model="recordInfo.queryForm.organizationSort" clearable style="width:140px">
              <el-option
                v-for="(item, index) in organizationCategoryList"
                :key="index"
                :label="item.fieldName"
                :value="item.fieldId"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="'onlineShoppingMallGoodsOrganization' === functionSort" label="店型" style="width:300px">
            <el-select v-model="recordInfo.queryForm.storeTypeBusinessCircleId" clearable style="width:130px">
              <el-option
                v-for="(item, index) in storeTypeBusinessCircleList"
                :key="index"
                :label="item.fieldName"
                :value="item.fieldId"
              />
            </el-select>
            <el-select v-model="recordInfo.queryForm.storeTypeStoreAreaId" clearable style="width:130px">
              <el-option
                v-for="(item, index) in storeTypeStoreAreaList"
                :key="index"
                :label="item.fieldName"
                :value="item.fieldId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRecordList">搜索</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="success" @click="handleAdd()">添加</el-button>
          </el-form-item> -->
          <el-form-item v-if="false === singleSelect">
            <el-button type="primary" @click="handleAdd()">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      ref="multipleTable"
      v-loading="recordInfo.loading"
      class="table-default"
      max-height="500"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="false === singleSelect" type="selection" width="43" align="center" />
      <!--      <el-table-column v-if="sortName!== 'supplier'" prop="organizationId" label="机构编号" width="169" align="center"></el-table-column>-->
      <!--      <el-table-column v-else prop="supplierOrganizationId" label="机构编号" width="169" align="center"></el-table-column>-->
      <!--      <el-table-column prop="organizationName" label="机构名称" align="center"/>-->
      <!--      <el-table-column prop="address" label="机构地址" align="center" show-tooltip-when-overflow/>-->
      <!--      <el-table-column label="机构分类" width="100" align="center" show-tooltip-when-overflow>-->
      <!--        <template v-slot="scope">-->
      <!--          {{ scope.row.organizationSort | commonFieldFilter(organizationCategoryList) }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column v-if="true === singleSelect" prop="priceTax" label="选择" width="60" fixed="right"-->
      <!--                       align="center">-->
      <!--        <template v-slot="scope">-->
      <!--          <div class="list-operate-menu">-->
      <!--            <i class="el-icon-success single-check-button" @click="confirmSelect(scope.row)"></i>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :label="item.label"
        :type="item.type"
        :width="item.width"
        align="center"
        show-tooltip-when-overflow
      >
        <template v-if="item.prop" v-slot="scope">
          <div v-if="item.prop === 'organizationSort'">
            {{ scope.row.organizationSort | commonFieldFilter(organizationCategoryList) }}
          </div>
          <div v-else-if="item.prop === 'singleSelect'" class="list-operate-menu">
            <i class="el-icon-success single-check-button" @click="confirmSelect(scope.row)" />
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>

      </el-table-column>

      <!--      <el-table-column prop="priceTax" label="选择" width="60" fixed="right"-->
      <!--                       align="center">-->
      <!--        <template v-slot="scope">-->
      <!--          <div class="list-operate-menu">-->
      <!--            <i class="el-icon-success single-check-button" @click="confirmSelect(scope.row)"></i>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

    </el-table>
    <pagination
      v-show="recordInfo.total > 0"
      :total="recordInfo.total"
      :page.sync="recordInfo.queryForm.page"
      :limit.sync="recordInfo.queryForm.pageSize"
      @pagination="getRecordList"
    />
  </el-dialog>
</template>

<script>
import ListMixin from '@/mixins/modules/list'
import filters from '@/filters/index'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  filters: { ...filters },
  mixins: [ListMixin],
  props: {
    functionSort: {
      type: String,
      default: ''
    }, relatedId: {
      type: String,
      default: ''
    }, organizationType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '选择机构',
      visible: false,
      singleSelect: false,
      recordInfo: {
        queryForm: {
          page: 1,
          pageSize: 10,
          state: [],
          returnCount: true,
          fieldReturnStoreInfo: false,
          fieldReturnPicture: false,
          fieldReturnParentOrganizationName: false,
          organizationName: ''
        },
        requestUrl: this.$api.getOrganizationList,
        loading: false,
        list: [],
        total: 0
      },
      callbackFunc: null,
      autoGetList: false,
      multipleSelection: [],
      sortName: '',
      columns: [{
        label: '机构编号',
        prop: 'organizationId',
        key: 'organizationId'
      }, {
        label: '机构名称',
        prop: 'organizationName'
      }, {
        label: '机构地址',
        prop: 'address',
        key: 'address'
      }, {
        label: '机构分类',
        prop: 'organizationSort'
      }
      ]
    }
  },
  computed: {
    organizationCategoryList: {
      get() {
        let organizationCategoryList = this.$store.state.static.organizationCategoryList
        if (!organizationCategoryList) {
          this.$store.dispatch('static/setOrganizationCategoryList')
          organizationCategoryList = []
        }
        return organizationCategoryList
      }
    }
  },
  methods: {
    init(callback, option) {
      this.multipleSelection = []
      this.callbackFunc = callback
      this.visible = true
      this.recordInfo.queryForm.organizationName = ''
      this.recordInfo.total = 0
      this.recordInfo.list = []
      let functionSort
      if (undefined !== option && undefined !== option.functionSort) {
        functionSort = option.functionSort
      } else {
        functionSort = this.functionSort
      }
      this.sortName = functionSort
      if (undefined !== option && undefined !== option.singleSelect) {
        this.singleSelect = option.singleSelect
      } else {
        this.singleSelect = false
      }
      const singleSelect = this.singleSelect
      let columns = this.columns
      let hasSingleSelect = false
      for (const val of columns) {
        if (val.prop === 'singleSelect') {
          hasSingleSelect = true
          break
        }
      }
      if (!hasSingleSelect && singleSelect) {
        columns = [...[{
          label: '选择',
          prop: 'singleSelect',
          width: '49'
        }], ...columns]
      }
      if (hasSingleSelect && !singleSelect) {
        columns.splice(0, 1)
      }

      this.columns = columns

      if (functionSort === 'onlineShoppingMallGoodsOrganization') {
        // 线上商城商品上架机构
        this.recordInfo.requestUrl = this.$api.userOnlineShoppingMallGoodsOrganizationList
        // this.recordInfo.queryForm.onlineShoppingMallGoodsId = this.relatedId;
        this.recordInfo.queryForm.onlineShoppingMallGoodsOrganizationType = 0
      } else if (functionSort === 'supplier') {
        // 供应商
        this.title = '请选择供应商'
        this.recordInfo.requestUrl = this.$api.getSupplierList
      } else if (functionSort === 'store') {
        // 店铺
        this.title = '请选择店铺'
        this.recordInfo.requestUrl = this.$api.getStoreOrganizationList
      } else if (functionSort === 'supplyTargetOrganization') {
        // 供应目标机构
        this.title = '请选择机构'
        this.recordInfo.requestUrl = this.$api.getSupplyTargetOrganizationList
        this.recordInfo.queryForm.supplierOrganizationId = option.supplierOrganizationId
      } else if (functionSort === 'chainWarehouse') {
        // 连锁配送中心
        this.recordInfo.requestUrl = this.$api.getOrganizationList
        this.recordInfo.queryForm.organizationType = 6
      } else if (functionSort === 'chain') {
        // 连锁
        this.recordInfo.requestUrl = this.$api.getOrganizationList
        this.recordInfo.queryForm.organizationType = 4
      } else {
        this.recordInfo.queryForm.organizationType = this.organizationType
        if (this.organizationType === '5') {
          this.recordInfo.requestUrl = this.$api.getStoreOrganizationList
        }
      }

      for (const val of columns) {
        if (functionSort === 'supplier') {
          if (val.key === 'organizationId') {
            val.prop = 'supplierOrganizationId'
          }
          if (val.key === 'address') {
            val.prop = 'organizationAddress'
          }
        } else {
          if (val.key === 'organizationId') {
            val.prop = 'organizationId'
          }
          if (val.key === 'address') {
            val.prop = 'address'
          }
        }
      }
      this.getRecordList(true)
    },
    confirmSelect(item) {
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc([item])
      }
    },
    couponCoinAddCancel() {
      this.couponCoinAddReset()
      this.visible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      if (this.multipleSelection.length === 0) {
        this.$commonUtils.showWarningToast('请勾选要添加的项')
        return
      }
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc(this.multipleSelection)
      }
    },
    closeClick() {
      this.recordInfo.queryForm.page = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.single-check-button {
  font-size: 20px !important;
  cursor: pointer;

  &:hover {
    color: #3a8ee6;
  }
}
</style>
